<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <!--引入vue-->
    <script src="../../js/vue.js"></script>
    <!--引入Element-->
    <script src="../../js/index.js"></script>
    <link rel="stylesheet" href="../../css/index.css">
    <!--引入axios-->
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/request.js"></script>
</head>
<body>
<div id="app">
    <div style="width: 300px; margin: 120px auto;">
        <el-form ref="formRef" :model="formData" label-width="80px" :rules="rules">

            <el-form-item label="原密码" prop="oldPassword">
                <el-input type="password" v-model="formData.oldPassword"></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="formData.newPassword"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="newPassword2">
                <el-input type="password" v-model="formData.newPassword2"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>

    </div>

</div>
<script>
    //  公共校验规则
    const passwordRules = [
        {required: true, message: '密码不能为空', trigger: 'blur'},
        {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'},
    ];
    let app = new Vue({
        el: '#app',
        data() {
            return {
                formData: {
                    oldPassword: '',
                    newPassword: '',
                    newPassword2: '',
                },
                // 校验
                rules: {
                    oldPassword: [
                        // {required: true, message: '请输入旧密码', trigger: 'blur'},
                        // {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
                        // ES6 中的扩展运算符 将数组 passwordRules 中的所有元素展开，并将它们合并到新的数组中
                        ...passwordRules
                    ],
                    newPassword: [
                        ...passwordRules,
                        {
                            validator: (rule, value, callback) => {
                                if (value === this.formData.oldPassword) {
                                    callback(new Error('新密码不能与旧密码相同'))
                                } else {
                                    callback()
                                }
                            }, trigger: 'blur'
                        }
                    ],
                    newPassword2: [
                        ...passwordRules,
                        {
                            validator: (rule, value, callback) => {
                                if (value !== this.formData.newPassword) {
                                    callback(new Error('两次输入密码不一致'))
                                } else {
                                    callback()
                                }
                            }, trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            // 提交修改密码
            submit() {
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        console.log('校验成功')
                        console.log(this.formData)
                        $axios.post('/user?m=rePassword', {
                            oldPassword: this.formData.oldPassword,
                            newPassword: this.formData.newPassword
                        }).then(res => {
                            console.log(res)
                            if (res.code === 1) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                })
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                })
                //重置表单校验
                this.$refs.formRef.resetFields();
                return false
            },
            reset() {
                // 重置表单
                this.formData = {
                    oldPassword: '',
                    newPassword: '',
                    newPassword2: '',
                }
            }
        }
    })
</script>
</body>
</html>